<template>
    <div class="admin_all">
        <div @click="back" class="t_back">
            <router-link :to="{path:'adminydjqd'}">
                <i style="font-size:20px" class="el-icon-arrow-left"></i>
                {{shopname}}
            </router-link>

        </div>
        <div class="t_btn_box">
            <div>
                <el-input style="width:180px" size="small" v-model="searchname" placeholder="用户自定义渠道名称"></el-input>
                <el-button @click="getlist()()" size="small" type="danger">搜索</el-button>

                <el-button @click="createwindow('')" size="small" type="danger">添加店铺</el-button>
            </div>
        </div>
        <div class="t_table_box">
            <el-table :data="tableData">
                <el-table-column prop="name" label="接口渠道名称">
                </el-table-column>
                <el-table-column prop="user_defined_name" label="用户自定义渠道名称">
                </el-table-column>
                <el-table-column prop="created_at" label="对接完成时间">
                </el-table-column>
                <!--  -->
                <el-table-column  v-if="allpicknum>0" label="是否选号">
                    <template slot-scope="scope">
                        <el-switch
                        @change="changesw($event,scope.row.id)"
                        :active-value=allpicknum
                        :inactive-value=0
                        v-model="scope.row.pick_number"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="操作">
                    <template slot-scope="scope">
                        <el-button
                        type="text"
                        size="mini"
                        @click="pzroot(scope.row)">配置权限</el-button>
                        <el-button
                        type="text"
                        size="mini"
                        @click="createwindow(scope.row)">编辑</el-button>
                        <el-button
                        v-if="scope.row.notify_url!=''"
                        type="text"
                        size="mini"
                        @click="copy(scope.row.notify_url)">复制回调地址</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加店铺 -->
        <el-dialog title="添加店铺" :visible.sync="createzf" width="500px">
            <el-form  label-width="120px">
                <el-form-item label="店铺名称">
                    <el-input :disabled="isedit" @blur="checkshop"
                     v-model="inputadd.shop_name" placeholder="请输入店铺名称" size="small" ></el-input>
                </el-form-item>
                <el-form-item label="店铺拼音">
                    <el-input :disabled="isedit" v-model="inputadd.y_name" placeholder="请输入店铺拼音" size="small" ></el-input>
                </el-form-item>

                <el-form-item v-for="(item,index) in inputlist" :key="index" :label="item.name">
                    <el-input @input="inputChange"  v-model="inputadd[item.key]" size="small" :type="item.type" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small"  type="danger" plain @click="createzf = false">取 消</el-button>
                <el-button size="small"  type="danger" @click="adddp">添 加</el-button>
            </span>
        </el-dialog>
        <!-- 权限弹窗 -->
        <el-dialog
            title="落基权限配置"
            :visible.sync="isshowqx"
            :close-on-click-modal="false"
            center="true"
            width="500px">
            <div>
                <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="(item,index) in allcheck" :key="index" style="margin-bottom: 20px;display: block;" :label="item.key">{{ item.name }}——{{ item.key }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div style="text-align: center;">
                <el-button type="danger" round @click="surebtn">保存</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import admin_top from './top.vue';
import axios from "axios";
import E from 'wangeditor'

export default {
    props:['shopid','shopname'],
    components: {
        admin_top
    },
    data() {
        return {
            tableData: [],
            //创建订单页面是否显示
            createzf: false,
            //添加输入框
            inputlist:[

            ],
            //添加输入框数据
            inputadd:{
                shop_name:'',
                y_name:''
            },
            isedit:false,
            rowid:'',
            iscanclick:true,
            searchname:"",
            isshowqx:false,
            checkList:[],
            allcheck:[],
            qxid:'',
            allpicknum:''
        };
    },
    mounted() {

        // this.$route.query.type = this.shopid
        if(this.shopid==''){
            this.shopid=this.$route.query.type
        }
         if(this.shopname==''){
            this.shopname=this.$route.query.name
        }
        //获取列表
        this.getlist()
    },
    methods: {
        //获取列表
        getlist(){
            axios.get('/api/plan-market/admin/upstream/channel/shop/list',{
                 params:{
                     id:this.shopid,
                     user_defined_name:this.searchname
                 }
             })
              .then((response) => {

                this.allpicknum = response.data.data.pick_number

                var dataarr = []
                for (let i in response.data.data) {
                    if(i!='pick_number'){
                        dataarr.push(response.data.data[i])
                    }
                }
                this.tableData=dataarr

                console.log('--')
                console.log(this.tableData)
                console.log(this.allpicknum)

              })
        },
        //打开弹窗
        createwindow(row) {
            this.createzf = true
            this.iscanclick = true
            if(row){
                //编辑
                console.log('编辑')
                console.log(row)
                this.isedit=true
                this.rowid = row.id

                this.inputadd.shop_name = row.name
                this.inputadd.y_name = row.y_name
                axios.get('/api/plan-market/admin/upstream/channel/data',{
                    params:{
                        id:row.id
                    }
                })
                .then((response) => {
                    // console.log(response.data.data[0].data)
                    this.inputlist=JSON.parse(response.data.data[0].data_config)

                    var editdata = JSON.parse(response.data.data[0].data)



                    console.log('editdata')
                    console.log(editdata)


                    // //添加数据绑定
                    for(var i=0;i<this.inputlist.length;i++){
                      this.inputadd[this.inputlist[i].key]=editdata[this.inputlist[i].key]
                        // for(let index in editdata){
                        //     console.log(editdata[index])
                        //     if(editdata[index]){
                        //         this.inputadd[this.inputlist[i].key]=editdata[index]
                        //     }else{
                        //         this.inputadd[this.inputlist[i].key]=''
                        //     }
                        // }

                    }

                    console.log('===')
                    console.log(this.inputadd)

                })
            }else{
                console.log('新增')
                this.isedit=false
                this.rowid = ''

                axios.get('/api/plan-market/admin/upstream/channel/info',{
                    params:{
                        id:this.shopid
                    }
                })
                .then((response) => {

                    this.inputlist=JSON.parse(response.data.data.data)
                console.log('===')
                console.log(this.inputlist)
                    //添加数据绑定
                    for(var i=0;i<this.inputlist.length;i++){
                        this.inputadd[this.inputlist[i].key]=''
                    }
                    this.inputadd.shop_name=''
                    this.inputadd.y_name=''
                })
            }


        },
        //添加
        adddp(){
            if(this.iscanclick){
                this.iscanclick = false
                if(this.isedit){
                    //编辑
                    this.inputadd['id']=this.rowid
                    console.log(this.inputadd)
                    axios.post('/api/plan-market/admin/upstream/channel/edit',this.inputadd)
                    .then((response) => {

                        console.log(response)
                        if(response.data.msg.code==0){

                            this.$message({
                                message: '编辑成功',
                                type: 'success'
                            });
                            this.createzf = false
                            this.iscanclick = true
                            //获取列表
                            this.getlist()
                        }else{
                            this.$message.error(response.data.msg.info);
                        }
                    })
                }else{
                    //新增
                    this.inputadd['id']=this.shopid
                    console.log(this.inputadd)
                    axios.post('/api/plan-market/admin/upstream/channel/create_store',this.inputadd)
                    .then((response) => {

                        console.log(response)
                        if(response.data.msg.code==0){

                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.createzf = false
                            this.iscanclick = true
                            //获取列表
                            this.getlist()
                        }else{
                            this.$message.error(response.data.msg.info);
                        }
                    })
                }
            }


        },
        //检查店铺名称
        checkshop(){
            if(this.inputadd.shop_name==''){
                this.$message.error("请输入店铺名称");
                return
            }
             axios.get('/api/plan-market/admin/shop/info',{
                 params:{
                     shop_name:this.inputadd.shop_name
                 }
             })
              .then((response) => {
                console.log(response)
                if(response.data.msg.code==0){
                    this.$message({
                        message: '店铺名验证成功',
                        type: 'success'
                    });
                }else{
                    this.$message.error("店铺不存在，请重新输入");
                    this.inputadd.shop_name=''
                }
              })
        },

        //返回
        back(){
            this.$emit('back')

        },
        inputChange(){
            this.$forceUpdate();  //强制刷新
        },
        //复制功能
        copy: function(t) {
        var that = this;
        this.$copyText(t).then(res => {
            that.$message.success("复制成功");
            });
        },
        changesw($event,id){

            axios.post('/api/plan-market/admin/upstream/channel/user-data/set',{
                id:id,
                pick_number:$event
            })
            .then(response => {
                if (response.data.msg.code == 0) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    //获取初始状态
                    this.getlist()
                } else {
                    this.$message.error(response.data.msg.info);
                }
            })
        },
        //确认弹窗
        surebtn(){
            this.isshowqx = false
            console.log(this.checkList)
            var choosearr = []
            for(var x=0;x<this.checkList.length;x++){
                for(var y=0;y<this.allcheck.length;y++){
                    if(this.checkList[x]==this.allcheck[y].key){
                       choosearr.push(this.allcheck[y])
                    }
                }
            }
            console.log(choosearr)
            axios.post('/api/plan-market/admin/upstream/channel/shop/update',{
                id:this.qxid,
                datas:choosearr
            })
            .then(response => {
                if (response.data.msg.code == 0) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    //获取初始状态
                    this.getlist()
                } else {
                    this.$message.error(response.data.msg.info);
                }
            })
        },
        //打开配置权限
        pzroot(row){
            this.qxid = row.id
            axios.get('/api/plan-market/admin/upstream/channel/data',{
                    params:{
                        id:row.id
                    }
                })
                .then((response) => {
                    console.log(response.data.data[0].overall_config)
                    console.log(response.data.data[0].upstream_config_type)
                    //总
                    var overall_config = JSON.parse(response.data.data[0].overall_config)
                    this.allcheck = overall_config
                    //选中
                    if(response.data.data[0].upstream_config_type){
                        var upstream_config_type = JSON.parse(response.data.data[0].upstream_config_type)

                    }else{
                        var upstream_config_type = []
                    }
                    var choosearr = []
                    for(var x=0;x<upstream_config_type.length;x++){
                        choosearr.push(upstream_config_type[x].key)
                    }
                    this.checkList = choosearr

                    console.log(overall_config)
                    console.log(upstream_config_type)


                    this.isshowqx = true

                })
        }

    },
}
</script>
<style scoped>
.t_btn_box {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;

}

.t_table_box {
    padding: 20px;

}
.t_back a{
    padding:0 20px 20px 20px;
    font-size:14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color:black;

}

</style>
<style lang="scss" scoped>
.admin_all {
    background: #EAEAEA;
    min-height: 100vh;
    padding: 0px;

    .logo {
        height: 30px;
    }

    .el-input {
        // width: 180px;
        // margin-right: 10px;
    }

    .flex {
        display: flex;
    }



    .zu {
        margin-top: 20px;

        .tit {
            background: #ccc;
            line-height: 45px;
            padding-left: 20px;
        }

        .con {
            background: #FFFFFF;
            padding: 20px;
            line-height: 30px;
            font-size: 14px;
        }

        .lli {
            margin-right: 30px;
            color: #666;
        }
    }
}
</style>
